序號項目

在這個範例中要練習序號項目的切版

整理幾個小重點如下方：

1.font-size調整文字大小，font-weight調整文字厚度，line-height調整行高，letter-spacing調整文字間距，text-align: center文字置中，border-radius導圓角
2.在這裡的日期標籤是使用span標籤，但span是inline物件，需要將它設定display: block讓物件占滿整個空間，即可完成文字換行
3.這裡的序號項目使用偽元素.item p::before去製作，使用偽元素要添加content: ''接下來的調整才會顯示，偽元素是inline物件，而設定blcok又會自動占滿一行造成換行，這裡可以使用display: inline-block同時兼具兩者的特性，設定尺寸、內距外距都會有作用，也可以水平排列
4.將序號項目的圓設為60px，添加aspect-ratio製作等比例縮放區塊，讓圓型物件保持固定的寬高比例
5.偽元素.item p::before內添加屬性position: absolute (絕對定位)讓他抽出來獨立一層向左偏移，並且在p::before的父層p內添加position: relative (相對定位)，作為子層定位的依據
6.在這個範例的序號是沒有特殊涵義，因此把數字寫在偽元素的content: ''裡面，並使用:nth-child()，括號內填入項目的順序即可完成指定

.item p:nth-child(1):before{
    content: '01.';
}
.item p:nth-child(2):before{
    content: '02.';
}
.item p:nth-child(3):before{
    content: '03.';
}

想直接看效果可以點擊連結>>>https://codepen.io/ocqyfixe/pen/abEJGmN

HTML

<div class="container">
    <div class="item">
        <p>因為小白人太愛吃了，逐漸長成跟西瓜很像的胖胖肚子...
            <span>July 26, 2022</span> 
            </p>
        <p>小白人很不喜歡跑步，為了提升減肥的動力，報名了健身房...
            <span>July 26, 2022</span> 
        </p>
        <p>是標準的社畜一枚，只想準時下班的小白人
            <span>July 26, 2022</span> 
        </p>
    </div>
</div>

CSS

.container{
    width: 100%;
    margin: auto;
    padding: 100px;
}
.item{
    width: 520px;
    margin: auto;
    padding: 50px;
    background-color: #FFEBF2;
    border-radius: 50px;
    
}
.item p{
    font-size: 18px;
    font-weight: 500;
    line-height: 2;
    margin: 20px 0;
    position: relative;
    left: 70px;
}
.item span{
    display: block;
    font-size: 12px;
    font-weight: 100;
}
.item p::before{
    content: '';
    position: absolute;
    display: inline-block;
    width: 60px;
    font-weight: 800;
    font-size: 20px;
    text-align: center;
    line-height: 3;
    aspect-ratio: 1/1;
    border-radius: 50%;
    color: #fff;
    background-color:#ffbbbb;
    left: -70px;
}
.item p:nth-child(1):before{
    content: '01.';
}
.item p:nth-child(2):before{
    content: '02.';
}
.item p:nth-child(3):before{
    content: '03.';
}